/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-20 15:44:39
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2023-01-04 10:53:32
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProcessBroad\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import classNames from 'classnames'
import { log } from 'console'
import { get } from 'lodash'
import { useEffect, useState } from 'react'
import { useParams } from 'react-router'

import { procedureApi } from '@/recoil/processBroad/api'

import BoardHead from '../productionBroad/components/boardHead'
import Equipment from './components/equipment'
import IronInventory from './components/ironInventory'
import ProductionRank from './components/productionRank'
import ProductionSum from './components/productionSum'
import styles from './index.module.less'

const TITLE_MAP = {
  iron: '大烫',
  pack: '包装',
  check: '复查'
}

export default () => {
  // const params = useParams()
  const params = {
    id: 'pack'
  }

  const [productionData, setProductionData] = useState<any>({})
  const [deviceData, setDeviceData] = useState<any>({})
  const [locationData, setLocationData] = useState<any[]>([])
  const [areaStock, setAreaStockQty] = useState<number | string>(0)
  const [styleOrderData, setStyleOrderData] = useState<any[]>([])
  const [styleOrderSum, setStyleOrderSum] = useState<number | string>(0)
  const [isFull, setIsFull] = useState<boolean>(false)

  const getProcessData = async () => {
    // const testData = [
    //   { x: '22 1', y: 10 },
    //   { x: '22 2', y: 11 },
    //   { x: '22 3', y: 12 },
    //   { x: '22 4', y: 13 },
    //   { x: '22 5', y: 15 },
    //   { x: '22 6', y: 12 }
    // ]
    // setProductionData({
    //   productionTotal: testData,
    //   productionCapital: testData,
    //   rankList: [
    //     {
    //       productionRecordId: 1,
    //       ranking: 1,
    //       production: 100,
    //       workNo: 10,
    //       realName: '章三'
    //     },
    //     {
    //       productionRecordId: 2,
    //       ranking: 2,
    //       production: 100,
    //       workNo: 10,
    //       realName: '李四'
    //     },
    //     {
    //       productionRecordId: 3,
    //       ranking: 3,
    //       production: 100,
    //       workNo: 10,
    //       realName: '王武'
    //     },
    //     {
    //       productionRecordId: 4,
    //       ranking: 4,
    //       production: 100,
    //       workNo: 10,
    //       realName: '赵六'
    //     }
    //   ]
    // })

    // const deviceD = {
    //   countNum: 20,
    //   inUseNum: 15,
    //   usage: '50%'
    // }

    // setDeviceData(deviceD)

    // const locationD = [
    //   { locationCode: 'A1', capacity: 50, stockQty: 10, id: 1 },
    //   { locationCode: 'A2', capacity: 50, stockQty: 50, id: 2 },
    //   { locationCode: 'A3', capacity: 50, stockQty: 20, id: 3 },
    //   { locationCode: 'A4', capacity: 50, stockQty: 30, id: 4 },
    //   { locationCode: 'A5', capacity: 50, stockQty: 0, id: 5 }
    // ]

    // setLocationData(locationD)

    // const sArr = [
    //   {
    //     styleOrderId: 1,
    //     styleCode: '阿迪舒服的',
    //     amount: 50,
    //     finishedAmount: 20,
    //     unFinishedAmount: 30,
    //     residueStockQty: 10
    //   },
    //   {
    //     styleOrderId: 2,
    //     styleCode: '阿迪舒服的',
    //     amount: 50,
    //     finishedAmount: 20,
    //     unFinishedAmount: 30,
    //     residueStockQty: 10
    //   }
    // ]
    // setStyleOrderData(sArr)
    // setStyleOrderSum(50)

    try {
      const res = await procedureApi({})
      console.log('🚀 ~ file: index.tsx:129 ~ getProcessData ~ res:', res)
    } catch (err) {
      console.log(err, '-----')
    }
    procedureApi(params.id).then((response) => {
      console.log(
        '🚀 ~ file: index.tsx:126 ~ procedureApi ~ response:',
        response
      )
      if (response.code === 200) {
        const { data = {} } = response
        const {
          production,
          deviceCondition,
          locationStockList,
          areaStockQty,
          moList,
          moQty
        } = data
        setProductionData({ ...production })
        setDeviceData({ ...deviceCondition })
        if (locationStockList && Array.isArray(locationStockList)) {
          setLocationData([...locationStockList])
        }
        if (moList && Array.isArray(moList)) {
          setStyleOrderData([...moList])
        }
        setAreaStockQty(areaStockQty)
        setStyleOrderSum(moQty)
      }
    })
  }

  useEffect(() => {
    params.id && getProcessData()
    const timer = setInterval(() => {
      params.id && getProcessData()
    }, 10000)
    return () => {
      clearInterval(timer)
    }
  }, [params.id])

  return (
    <div className={classNames(styles.container, isFull ? styles.screen : '')}>
      <BoardHead title={`#${get(TITLE_MAP, params.id)}#车间生产生产看板`} />
      <div className={styles.chartBox}>
        <div className={styles.chartLeft}>
          <div className={styles.chartLeftTop}>
            <ProductionRank
              field={params.id}
              isFull={isFull}
              data={productionData}
            />
          </div>
          <div className={styles.chartLeftBottom}>
            <Equipment data={deviceData} />
          </div>
        </div>
        <div className={styles.chartRight}>
          <div className={styles.chartRightBox}>
            <IronInventory
              data={locationData}
              field={params.id}
              areaStockQty={areaStock}
            />
          </div>
          <div className={styles.chartRightBox}>
            <ProductionSum
              data={styleOrderData}
              isFull={isFull}
              moQty={styleOrderSum}
            />
          </div>
        </div>
      </div>
    </div>
  )
}
